<template>
  <div class="roi-box">
    <div class="d-flex jc-between ai-center">
      <div>
        ROI
        <el-tooltip
          v-if="editType === 'edit'"
          popper-class="tooltip"
          effect="dark"
          placement="top-start"
        >
          <div slot="content">
            <img
              class="polygon-btn"
              src="./assets/polygon.svg"
            />{{ $t("roi_tips1") }}
            <br />
            <img
              class="line-btn"
              src="./assets/line.svg"
            />{{ $t("roi_tips2") }}<br />
            <img
              class="rect-btn"
              src="./assets/rect.svg"
            />{{ $t("roi_tips3") }}
          </div>
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <MyButton
        v-if="hasDefault && editType === 'edit'"
        class="add"
        icon="el-icon-info"
        @click="handleSetDefault"
        >{{ $t("default") }}</MyButton
      >
    </div>
    <div class="video-wrapper">
      <VideoPlay :channel="formData.channel" />
      <div
        class="default-text"
        v-show="
          drawType === 'rect' &&
          rectData.length === 0 &&
          !isDrawing &&
          status == 1 &&
          editType === 'edit'
        "
      >
        1920x1080=2073600
      </div>
      <canvas id="myCanvas" width="480" height="270" />
      <template v-if="editType === 'edit'">
        <div class="img-wrapper">
          <div
            class="img-box"
            v-if="drawType.includes('rect') && _drawType !== 'rect'"
          >
            <img
              class="rect-btn"
              src="./assets/rect.svg"
              @click="handleStartRect"
            />
          </div>
          <div
            class="img-box"
            v-else-if="drawType.includes('rect') && _drawType === 'rect'"
          >
            <img
              class="rect-btn"
              src="./assets/rect_active.svg"
              @click="handleStartRect"
            />
          </div>
          <div
            class="img-box"
            v-if="drawType.includes('line') && _drawType !== 'line'"
          >
            <img
              class="line-btn"
              src="./assets/line.svg"
              @click="handleStartLine"
            />
          </div>
          <div
            class="img-box"
            v-else-if="drawType.includes('line') && _drawType === 'line'"
          >
            <img
              class="line-btn"
              src="./assets/line_active.svg"
              @click="handleStartLine"
            />
          </div>
          <div
            class="img-box"
            v-if="drawType.includes('polygon') && _drawType !== 'polygon'"
          >
            <img
              class="polygon-btn"
              src="./assets/polygon.svg"
              @click="handleStartPolygon"
            />
          </div>
          <div
            class="img-box"
            v-else-if="drawType.includes('polygon') && _drawType === 'polygon'"
          >
            <img
              class="polygon-btn"
              src="./assets/polygon_active.svg"
              @click="handleStartPolygon"
            />
          </div>
        </div>
        <MyButton
          v-show="hasDrawed"
          size="mini"
          class="cancel"
          @click="handleCancelDraw"
          >{{ $t("common.cancel") }}</MyButton
        >
        <MyButton
          v-show="hasDrawed"
          size="mini"
          class="confirm"
          @click="handleConfirmDraw"
          >{{ $t("common.confirm") }}</MyButton
        >
      </template>
    </div>
  </div>
</template>

<script>
import rectAction from "./mixins/rect";
import polygonAction from "./mixins/polygon";
import lineAction from "./mixins/line";
import VideoPlay from "@/views/video/VideoPlay";
export default {
  mixins: [rectAction, polygonAction, lineAction],
  components: {
    VideoPlay,
  },
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
    hasDefault: {
      type: Boolean,
      default: false,
    },
    drawType: {
      type: [String, Array],
      default: "rect",
    },
    status: {
      type: [String, Number],
      default: 1,
    },
    arrowValue: {
      type: Number,
      default: void 0,
    },
    editType: {
      type: String,
      default: "edit",
    },
  },
  data() {
    return {
      hasDrawed: false, // 是否已经绘制
      _drawType: "",
    };
  },
  methods: {
    handleStartRect() {
      if (this.status == 0) {
        return this.$message.error(this.$t("device_offline_promit"));
      }
      this.initRect();
      this.hasDrawed = false;
    },
    handleStartLine() {
      if (this.status == 0) {
        return this.$message.error(this.$t("device_offline_promit"));
      }
      if (!this.hasDrawed && this._drawType === "polygon") {
        this.polygon_removeEvent();
        this.cancelPolygon();
      }
      this.initLine();
      this.hasDrawed = false;
    },
    handleStartPolygon() {
      if (this.status == 0) {
        return this.$message.error(this.$t("device_offline_promit"));
      }
      if (!this.hasDrawed && this._drawType === "line") {
        this.line_removeEvent();
        this.cancelLine();
      }
      this.initPolygon();
      this.hasDrawed = false;
    },
    handleSetDefault() {
      const drawType = this.drawType.split(",");
      drawType.map((type) => {
        if (type.includes("rect")) {
          this.resetRect();
        }
      });
      this.hasDrawed = false;
    },
    handleConfirmDraw() {
      const drawType = this.drawType.split(",");
      let data = {};
      drawType.map((type) => {
        if (type.includes("rect")) {
          data.rect = this.getRects();
        }
        if (type.includes("line")) {
          data.line = this.getLines();
        }
        if (type.includes("polygon")) {
          data.polygon = this.getPolygons();
        }
      });
      this.$emit("updateFormData", data);
      this.hasDrawed = false;
    },
    handleCancelDraw() {
      const drawType = this.drawType.split(",");
      drawType.map((type) => {
        if (type.includes("rect")) {
          this.cancelRect();
        }
        if (type.includes("line")) {
          this.cancelLine();
        }
        if (type.includes("polygon")) {
          this.cancelPolygon();
        }
      });
      this.hasDrawed = false;
    },
    rect_drawEnd() {
      this.hasDrawed = true;
    },
    line_drawEnd() {
      this.hasDrawed = true;
    },
    polygon_drawEnd() {
      this.hasDrawed = true;
    },
  },
};
</script>

<style lang="less" scoped>
.tooltip {
  img {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.video-wrapper {
  position: relative;
  width: 480px;
  height: 270px;
  position: relative;
  .default-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 20px;
  }
  .confirm {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .cancel {
    position: absolute;
    right: 120px;
    bottom: 0;
  }
  #myCanvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
  }
  .img-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .img-box {
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #555555;
    border-radius: 50%;
    opacity: 0.6;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      opacity: 1;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
